<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>角色管理</title>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="/elementui/index.css">

    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body>

<div id="app">

	<el-form :inline="true" :model="formInline" class="demo-form-inline">
		<el-form-item label="出/入库单号">
			<el-input v-model="formInline.user" placeholder="请输入出/入库单号"></el-input>
		</el-form-item>
		<el-form-item label="批次">
			<el-input v-model="formInline.region" placeholder="请输入批次号"></el-input>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="onSubmit">查询</el-button>
		</el-form-item>
	</el-form>
    <br>
    <br>
    <el-button type="primary" @click="dialogFormVisible1 = true" >出库添加</el-button>
	<el-button type="primary" @click="dialogFormVisible2 = true">入库添加</el-button>
    <br>
    <br>
	<el-table
			ref="wareTable"
			:data="ioware"
            border
            :row-class-name="tableRowClassName"
			style="width: 100%">

		<el-table-column
				label="编号">
			<template slot-scope="scope">{{ scope.row.id }}</template>
		</el-table-column>
		<el-table-column
				label="出入/库单号">
			<template slot-scope="scope">{{ scope.row.ioNo }}</template>
		</el-table-column>
        <el-table-column
                label="出入库类型">
            <template slot-scope="scope">{{ scope.row.ioType }}</template>
        </el-table-column>
        <el-table-column
                label="批次">
            <template slot-scope="scope">{{ scope.row.batch }}</template>
        </el-table-column>
        <el-table-column
                label="产品名称">
            <template slot-scope="scope">{{ scope.row.pname }}</template>
        </el-table-column>
        <el-table-column
                label="产品型号">
            <template slot-scope="scope">{{ scope.row.pbrand }}</template>
        </el-table-column>
        <el-table-column
                label="产品数量">
            <template slot-scope="scope">{{ scope.row.pnum }}</template>
        </el-table-column>
        <el-table-column
                label="仓库名称">
            <template slot-scope="scope">{{ scope.row.wname }}</template>
        </el-table-column>
        <el-table-column
                label="出入库时间">
            <template slot-scope="scope">{{ scope.row.ioTime }}</template>
        </el-table-column>
        <el-table-column
                label="调拨相关单号">
            <template slot-scope="scope">{{ scope.row.companyId }}</template>
        </el-table-column>
		<el-table-column label="操作">
			<template slot-scope="scope">
                <el-button icon="el-icon-search" circle @click="selectiomWare(scope)" ></el-button>

			</template>
		</el-table-column>
	</el-table>

    <el-dialog title="仓库信息" :visible.sync="dialogFormVisible" width="75%" height="75%" @close="closeMyDialog">

	<el-table
			ref="imowareTable"
			:data="iomware"

			style="width: 100%">

		<el-table-column
				label="序号">
			<template slot-scope="scope">{{ scope.row.id }}</template>
		</el-table-column>
		<el-table-column
				label="产品码">
			<template slot-scope="scope">{{ scope.row.iomGoodsno }}</template>
		</el-table-column>
		<el-table-column
				label="商品名称">
			<template slot-scope="scope">{{ scope.row.iomGoods }}</template>
		</el-table-column>
		<el-table-column
				label="入库库名">
			<template slot-scope="scope">{{ scope.row.iomName }}</template>
		</el-table-column>
		<el-table-column
				label="入库区域">
			<template slot-scope="scope">{{ scope.row.iomArea }}</template>
		</el-table-column>
		<el-table-column
				label="入库库架">
			<template slot-scope="scope">{{ scope.row.iomShelves }}</template>
		</el-table-column>
		<el-table-column
				label="入库货位">
			<template slot-scope="scope">{{ scope.row.iomCargoloca }}</template>
		</el-table-column>
		<el-table-column
				label="入库时间">
			<template slot-scope="scope">{{ scope.row.iomTime }}</template>
		</el-table-column>
	</el-table>

    </el-dialog>

    <!--添加/修改角色的对话框-->
    <el-dialog title="出库添加" :visible.sync="dialogFormVisible1" @close="closeMyDialog1">
        <el-form >
            <el-form-item label="出库单号" :label-width="formLabelWidth">
                <el-input v-model="addimoware.ioNo" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="出库类型" :label-width="formLabelWidth">
                <el-select v-model="addimoware.ioType" placeholder="请选择出库类型">
                    <el-option label="销售订单出库" value="销售订单出库"></el-option>
                    <el-option label="调拨出库" value="调拨出库"></el-option>
                    <el-option label="采购订单出库" value="采购订单出库"></el-option>
                    <el-option label="采购交接单" value="采购交接单"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="批次" :label-width="formLabelWidth">
                <el-input v-model="addimoware.batch" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="产品名称" :label-width="formLabelWidth">
                <el-input v-model="addimoware.pname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="产品型号" :label-width="formLabelWidth">
                <el-input v-model="addimoware.pbrand" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="出库数量" :label-width="formLabelWidth">
                <el-input v-model="addimoware.pnum" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="仓库名称" :label-width="formLabelWidth">
            <el-select v-model="addimoware.wname" placeholder="请选择仓库">
                <el-option label="宿迁仓" value="宿迁仓"></el-option>
                <el-option label="和田仓" value="和田仓"></el-option>
                <el-option label="长新" value="长新"></el-option>
            </el-select>
        </el-form-item>
            <el-form-item label="出库时间" :label-width="formLabelWidth">
                <el-col :span="11">
                    <el-date-picker type="date" placeholder="选择日期" v-model="addimoware.ioTime" style="width: 100%;"></el-date-picker>
                </el-col>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible1 = false">取 消</el-button>
            <el-button type="primary" @click="saveimoWare">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="入库添加" :visible.sync="dialogFormVisible2" @close="closeMyDialog2">
        <el-form >
            <el-form-item label="入库单号" :label-width="formLabelWidth">
                <el-input v-model="inimoware.ioNo" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="入库类型" :label-width="formLabelWidth">
                <el-select v-model="inimoware.ioType" placeholder="请选择出库类型">
                    <el-option label="采购订单入库" value="采购订单入库"></el-option>
                    <el-option label="调拨入库" value="调拨入库"></el-option>
                    <el-option label="生产入库" value="生产入库"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="批次" :label-width="formLabelWidth">
                <el-input v-model="inimoware.batch" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="入库时间" :label-width="formLabelWidth">

                <el-col :span="11">
                    <el-date-picker type="date" placeholder="选择日期" v-model="inimoware.ioTime" @blur="toShowProduct"
                                    value-format="yyyy-MM-dd"


                                    style="width: 100%;"></el-date-picker>
                </el-col>
            </el-form-item>

            <el-table
                    :data="proDetails"
                    border
                    :row-class-name="tableRowClassName"
                    :key="Math.random()"
                    style="width: 100%">

                <el-table-column
                        label="序号">
                    <template slot-scope="scope">{{ scope.row.id }}</template>
                </el-table-column>
                <el-table-column
                        label="产品码">
                    <template slot-scope="scope">{{ scope.row.pnumber }}</template>
                </el-table-column>
                <el-table-column
                        label="商品名称">
                    <template slot-scope="scope">{{ scope.row.pname }}</template>
                </el-table-column>



                <el-table-column
                        label="仓库名称">
                    <template slot-scope="scope">
                    <el-select  v-model="goodNameAlls[scope.$index].wareName" placeholder="请选择仓库" @change="showInWare(scope.$index)">

                        <el-option

                                v-for="item in warehouseNameAll"
                                :key="item.wareName"
                                :label="item.wareName"
                                :value="item.wareName">
                        </el-option>
                    </el-select>
                    </template>

                </el-table-column>


                <el-table-column
                        label="货区名称">
                    <template slot-scope="scope">
                        <el-select  placeholder="请选择货区"
                                    v-model="goodNameAlls[scope.$index].goodsName"
                                   @change="showgoodName(scope.$index)">
                            <el-option

                                    v-for="item in goodNameAll"
                                    :key="item"
                                    :label="item"
                                    :value="item">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>


                <el-table-column
                        label="货架编号">
                    <template slot-scope="scope">
                        <el-select v-model="goodNameAlls[scope.$index].shelvesNo" placeholder="请选择货架"
                                   @change="showshelvesNo(scope.$index)">
                            <el-option

                                    v-for="item in shelvesNoAll"
                                    :key="item.shelvesNo"
                                    :label="item.shelvesNo"
                                    :value="item.shelvesNo">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>


                <el-table-column
                        label="货位编号">
                    <template slot-scope="scope">
                        <el-select v-model="goodNameAlls[scope.$index].cargoNo" placeholder="请选择货位">
                            <el-option

                                    v-for="item in cargoNoAll"
                                    :key="item.value"
                                    :label="item.cargoNo"
                                    :value="item.cargoNo">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>

                <el-table-column
                        label="状态">
                    <template slot-scope="scope">

                          <span v-if="scope.row.settlementStatus==='-1'">
                        <el-button type="success" round>已入库</el-button>
                          </span>
                    </span>
                    </template>
                </el-table-column>

                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <!--改变状态-->
                        <el-button type="success" icon="el-icon-check" circle
                                   @click="updateStatus(scope.$index, scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>

        </el-form>

    </el-dialog>
    <!--分页-->
	<el-pagination
			background
			layout="prev, pager, next"
			@current-change="loadPage"
			:total="total"
			:current-page="current"
			:page-size="pageSize">
	</el-pagination>


</div>
<script src="/vue/vue.js"></script>
<script src="/axios/axios.min.js"></script>
<script src="/qs/qs.min.js"></script>
<script src="/elementui/index.js"></script>
<script>
	new Vue({
		el: "#app",
		data() {


			return {
				ioware: null,
				iomware: null,
				total: 0,//总条数
				current: 0,//当前页数
				pageSize: 0, //每页条数
				current1:null,//当前点击角色
                warehouseNameAll:null,
                proDetails:null,
				formInline:{
					user:'',
					region:''
				},

                addimoware:{
				    ioNo:'',
				    ioType:'',
				    batch:'',
				    pname:'',
				    pbrand:'',
				    pnum:'',
				    wname:'',
				    ioTime:''
                },
                inimoware:{
				  ioNo:'',
                    ioType:'',
                    batch:'',
                    ioTime:''
                },
                goodNameAlls:[{
				    wareName:'',
                    goodsName: '',
                    shelvesNo: '',
                    cargoNo: ''
                }],

                goodNameAll: null,
                shelvesNoAll: null,
                cargoNoAll: null,


                dialogFormVisible: false,//控制对话框的显示
                formLabelWidth: '120px',//表单标签的宽度
                dialogFormVisible1:false,
                 dialogFormVisible2:false

				//表数据



			}
		},
		methods: {
            // 小表单提交
			onSubmit(){

                var ioNo = this.formInline.user;
                var batch = this.formInline.region;
                ioNo.isPrototypeOf()
                if (ioNo.length == 0 && batch.length == 0){    // 搜索框无内容
                    axios.get("/iowarehouse?current=" + this.current).then(value => {
                        if(value.data.state == 1){
                            console.log("进来了");
                            this.ioware = value.data.data.records;
                            this.total = value.data.data.total;
                            this.pageSize = value.data.data.size;
                            this.current = value.data.data.current;
                        }
                    });
                }else if (ioNo.length > 0 && batch.length == 0){    // 只有出入库单号
                    axios.post("/searchIoNo/"+ioNo+"?current="+this.current).then(value =>{
                        if (value.data.state == 1){
                            this.ioware = value.data.data.records;
                            this.total = value.data.data.total;
                            this.pageSize = value.data.data.size;
                            this.current = value.data.data.current;
                        }
                    });
                }else if (ioNo.length == 0 && batch.length > 0){    // 只有批次
                    axios.post("/searchBatch/"+batch+"?current="+this.current).then(value =>{
                        if (value.data.state == 1){
                            this.ioware = value.data.data.records;
                            this.total = value.data.data.total;
                            this.pageSize = value.data.data.size;
                            this.current = value.data.data.current;
                        }
                    });
                }else if (ioNo.length > 0 && batch.length > 0){     // 出入库单号和批次都有
                    axios.post("/search/"+ioNo+"/"+batch+"?current="+this.current).then(value =>{
                        if (value.data.state == 1){
                            this.ioware = value.data.data.records;
                            this.total = value.data.data.total;
                            this.pageSize = value.data.data.size;
                            this.current = value.data.data.current;
                        }
                    });
                }
			},
            tableRowClassName({row, rowIndex}) {
                if (rowIndex %2 === 0) {
                    return 'warning-row';
                } else if (rowIndex %2 === 1) {
                    return 'success-row';
                }
                return '';
            },

            showInWare(i){

                console.log(this.goodNameAlls);
                axios.get("/t-goodnameAll/" + this.goodNameAlls[i].wareName).then(value => {

                    if (value.data.state == 1) {

                        this.goodNameAll = value.data.data;

                    }
                })

            },
            showgoodName(i) {
                axios.get("/t-shelvesNo/" + this.goodNameAlls[i].goodsName).then(value => {
                    if (value.data.state == 1) {
                        this.shelvesNoAll = value.data.data;
                        console.log(this.shelvesNoAll)
                    }
                })
            },
            showshelvesNo(i) {
                axios.get("/t-Tca/" + this.goodNameAlls[i].shelvesNo).then(value => {
                    console.log(this.goodNameAlls[i].shelvesNo)
                    if (value.data.state == 1) {
                        this.cargoNoAll = value.data.data;
                        console.log(this.cargoNoAll)
                    }
                })
            },

            updateStatus(i,row){


                axios.post("/MyInWare",{
                    proDetails:this.proDetails[i],
                    goodNameAlls:this.goodNameAlls[i],
                    type:this.inimoware
                }).then(value => {
                    if (value.data.state == 1) {
                        this.proDetails[i].settlementStatus='-1'
                        console.log('移库成功')
                        this.dialogFormVisible2=false;
                        this.dialogFormVisible2=true;
                        this.$message({
                            type: 'success',
                            message: '移库成功!'
                        });
                    }else {
                        this.$message({
                            type: 'danger',
                            message: '移库失败!'
                        })
                    }
                })

            },
            toShowProduct(){
                console.log(this.inimoware.ioNo);
                console.log(this.inimoware.batch);
                console.log(this.inimoware.ioTime);
                console.log(this.inimoware.ioType);

                axios.get("/inWareType/"+this.inimoware.ioNo+"/"+this.inimoware.ioType).then(value => {
                    if (value.data.state == 1){

                     this.proDetails=   value.data.data;

                        for (let i = 0; i <this.proDetails.length ; i++) {
                            this.proDetails[i].settlementStatus='1'
                        }

                        for (let i = 0; i <this.proDetails.length-1; i++) {

                            this.goodNameAlls.push({
                                wareName:'',
                                goodsName: '',
                                shelvesNo: '',
                                cargoNo: ''
                            })
                        }

                    }
                })

            },

            closeMyDialog(){
			    this.iomware=null;

            },
            closeMyDialog1(){
                this.addimoware={
                    ioNo:'',
                    ioType:'',
                    batch:'',
                    pname:'',
                    pbrand:'',
                    pnum:'',
                    wname:'',
                    ioTime:'',
                };

            },

            closeMyDialog2(){
                this.inware=null

            },
            // closeMyDialog1(){
            //
            // },


            saveimoWare(){
				let _this=this.addimoware;
			    axios.post("/imoware",{
                    ioNo:this.addimoware.ioNo,
                    ioType:this.addimoware.ioType,
                    batch:this.addimoware.batch,
                    pname:this.addimoware.pname,
                    pbrand:this.addimoware.pbrand,
                    pnum:this.addimoware.pnum,
                    wname:this.addimoware.wname,
                    ioTime:this.addimoware.ioTime
                }).then(value => {
                    if (value.data.state==1){
                        this.loadPage(1)
                    }
                })
				this.dialogFormVisible1 = false;

			},


			selectiomWare(scope){
			    this.dialogFormVisible=true;
			console.log(scope.row.ioNo)

				axios.get("/iomwarehouse/"+scope.row.ioNo).then(value => {
							if (value.data.state == 1) {

                                this.iomware = value.data.data;
							}
						},
				);

			},


            //当前页跳转的方法
            loadPage(current) {
                this.current = current;

                //查询商品
                axios.get("/iowarehouse?current=" + current).then(value => {
                        if (value.data.state == 1) {
                        	console.log("进来了")
							this.ioware = value.data.data.records;
							this.total = value.data.data.total;
							this.pageSize = value.data.data.size;
							this.current = value.data.data.current;
                        }
                    },
                );

            }
        },
		mounted() {
			this.loadPage(1)

					//加载所有的权限

            axios.get("/list/t-ware").then(value =>{//查询所有仓库名称
                if (value.data.state == 1){
                    this.warehouseNameAll=value.data.data;
                    console.log(this.warehouseNameAll)
                }
            })
		}
	})


</script>
</body>
</html>